<template>
  <div>
    <div class="q">
      <h1 @click="change()">云墨</h1>
      <br /><br />
      <h2>{{ $store.state.word }}</h2>
    </div>
    <label for="q">-----{{ $store.state.title }}</label>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  // data() {
  //   return {
  //     word: JSON.parse(localStorage.getItem('word')),
  //     title: JSON.parse(localStorage.getItem('title')),
  //     changeid: true
  //   }
  // },
  // computed: {
  //    word() {
  //      return JSON.parse(localStorage.getItem('word'))
  //    },
  //    title() {
  //      return JSON.parse(localStorage.getItem('title'))
  //    }
  // },
  mounted() {
    this.changestart()
  },

  methods: {
    change() {
      this.$axios
        .get('https://v1.hitokoto.cn/')
        .then((response) => {
          console.log(response)
          // localStorage.setItem('word', JSON.stringify(response.data.hitokoto))
          this.$store.state.word = JSON.stringify(response.data.hitokoto)
          this.$store.state.title = JSON.stringify(response.data.from)
          localStorage.setItem('word', this.$store.state.word)
          localStorage.setItem('title', this.$store.state.title)
          // localStorage.setItem('title', JSON.stringify(response.data.from))
          // this.word = JSON.parse(localStorage.getItem('word'))
          // this.title = JSON.parse(localStorage.getItem('title'))
          // this.changeid = !this.changeid
          // console.log(this.changeid)
          //箭头函数一定要注意
        })
        .catch((error) => {
          console.log(error)
        })
    },
    changestart() {
      console.log(this.$store.state.word)
      if (!this.$store.state.word) {
        this.change()
      }
      // this.$nextTick(() => {
      //   this.word = JSON.parse(localStorage.getItem('word'))
      //   this.title = JSON.parse(localStorage.getItem('title'))
      // })
    }
  },
  // watch: {
  //   changeid: {
  //     deep: true,
  //     handler() {
  //       this.word = JSON.parse(localStorage.getItem('word'))
  //       this.title = JSON.parse(localStorage.getItem('title'))
  //     }
  //   }
  // }

  beforeDestroy() {
    console.log('销毁了')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
label {
  margin-left: 70%;
  margin-top: 10%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
.q {
  text-align: center;
  z-index: 3;
}
.button {
  padding: 0.3rem 0.5rem;
  border: 0.2rem solid #443;
  border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;
  color: #443;
  background: none;
  cursor: pointer;
  margin-top: 1rem;
  font-size: 0.1rem;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.topleft {
  position: absolute;
  margin-left: 10rem;
  margin-top: 0rem;
}
.button:hover {
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  border: 0.2rem dashed #443;
}
</style>
